<template>
  <div class="addCar">
    <div class="content">
      <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../../assets/images/star.png">
						<div class="mui-media-body">
							¥888
							<p class="mui-ellipsis">库存9199件</p>
						</div>
					</a>
				</li>
			</ul>
      <div class="select">
        规格
        <a @click="sel(index)" v-for="(item,index) in gg" :key="index" :class="{active:atv[index]}">100g</a>
      </div>
      <div class="num">
        <p>数量</p>
        <div>
          <span @click="subNum" :class="{subtract:true, end:subtract}">-</span>
          <input type="text" v-model="num">
          <span @click="addNum" :class="{ end:add}">+</span>
        </div>
     
      </div>
      <button class="addCarBtn">加入购物车</button>
      <img @click="$store.state.addCar=false" class="close" src="../../assets/images/close.png" alt="">
    </div>
  </div>
</template>

<script>
import Vue from "vue"
export default {

  data () {
    return {
      gg:['100g','200g','300g'],
      atv:[],
      num:1,
      subtract:true,
      add:false
    }
  },

  methods: {
    sel(index){
      this.gg.forEach((it,i)=>{
        Vue.set(this.atv,i,false)
      })
      Vue.set(this.atv,index,true)
    },

    addNum(){
      this.num++
      this.subtract = false
    },

    subNum(){
      
      if(this.num==1){
        this.num = 1
        this.subtract = true
        return
      }
      this.num--
    }
  },

  created () {
    this.gg.forEach(it=>{

      this.atv.push(false)
    })
    Vue.set(this.atv,0,true)
  }
}
</script>

<style lang='less'>
.end{
  color: #ccc;
}
.addCar{
  width:100%;
  height:100%;
  background: rgba(17,17,17,0.58);
  
  position: fixed;
  bottom:0;
  z-index: 9999;
  top:0;
  .content{
    border-radius:10px 10px 0px 0px;
    padding: 10px;
    width:100%;
    min-height:200px;
    background: #fff;
    position: absolute;
    bottom:0;
    .mui-table-view-cell{
      padding: 15px 15px;
    }
    .mui-media-body{
      font-size: 16px;
      color: #E4007B;
      p{
        font-size: 12px;
        color: #333333;
      }

    }
    .select{
      font-size: 14px;
      color: #333333;
      margin-top: 20px;
      padding: 0 3px;
      a{
        font-size: 14px;
        color: #333333;
        padding: 3px 10px;
        border: 1px solid #999999;
        border-radius: 2px;
        margin-left: 4px;
      }
      a.active{
        background: #FDDF00;
        border: 1px solid #FDDF00;
      }
      a:nth-child(1){
        margin-left: 7px;
      }
    }
    .num{
      font-size: 14px;
      color: #333333;
      margin-top: 30px;
      padding: 0 3px;
      // overflow: hidden;
 
      p{
        float: left;
        color: #333333;
      }
      div{
        float: left;
        width:92px;
        border: 1px solid #F1F1F1;
        border-radius: 3px;
        margin-left: 10px;
        height:26px;
        span{
          float: left;
          width:20px;
          height:25px;
          text-align: center;
          line-height: 25px;
          display: block;
        }
        input{
          width:50px;
          float: left;
          height:25px;
          border-top:none;
          border-bottom: none; 
          border-radius:0;
        }
      }
      
    }
    .addCarBtn{
      width:100%;
      height:45px;
      background: #FDDF00;
      border-radius: 100px;
      border: none;
      box-shadow: none;
      margin: 30px 0;
      font-size: 16px;
      color: rgba(51,51,51,0.85);
    }
    .close{
      position: absolute;
      width:23px;
      height:23px;
      top:15px;
      right:15px;
    }
  }
}
.mui-table-view .mui-media-object.mui-pull-left{
  margin-right: 30px;
}
.mui-table-view:before{
  height:0;
}
</style>
